/**
 * Created by yzdd on 2018/6/3.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  FlatList
} from 'react-native';
import {publicStyle, width} from "../utils/publiscStyle";
import {observer} from "mobx-react";
import {AddMaterialStore} from "../logics/AddMaterialStore";
import {observable} from "mobx";

const searchIcon = require("../assets/search.png");
const duigouIcon = require('../assets/duigou.png');

const styles = StyleSheet.create({
  searchHeader: {
    width,
    height: 49,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#EEEEEE",
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#E1E1E1",
  },
  leftInputView: {
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    height: 35,
    borderRadius: 5,
    paddingLeft: 14
  },
  icon3: {
    width: 16,
    height: 16
  },
  leftInput: {
    flex: 1,
    padding: 0,
    paddingLeft: 10,
    fontSize: 14
  },
  searchBtn: {
    width: 53,
    height: 35,
    alignItems: 'center',
    justifyContent: "center"
  },
  font7: {
    fontSize: 14,
    color: "#666666"
  },
  con: {
    backgroundColor: "#FFFFFF",
    flex: 1
  },
  addBtn: {
    width,
    height: 55,
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: "#1AAD19",
    justifyContent: 'center'
  },
  font17: {
    fontSize: 16,
    color: "#FFFFFF"
  },
  selectItem: {
    width,
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "space-between",
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: 1,
    paddingLeft: 15,
    paddingRight: 15
  },
  leftItemView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  selectCircleItem: {
    width: 18,
    height: 18,
    borderRadius: 18,
    backgroundColor: "#1AAD19",
    alignItems: "center",
    justifyContent: "center"
  },
  circleItem: {
    width: 18,
    height: 18,
    borderRadius: 18,
    backgroundColor: "#CCCCCC",
    alignItems: "center",
    justifyContent: "center"
  },
  icon7: {
    width: 10,
    height: 10
  },
  font22: {
    fontSize: 14,
    color: "#333333"
  }
});
const data = [
  {name: "POS机001", SN: "123456789"},
  {name: "POS机002", SN: "123456789"},
  {name: "POS机003", SN: "123456789"},
];
@observer
export default class AddMaterial extends Component {
  static navigationOptions = {
    title: "添加物料"
  }

  addMaterialStore = new AddMaterialStore();

  componentWillMount() {
    this.addMaterialStore.from(data);
  }

  @observable
  searchText = "";

  @observable
  filterText = "";

  renderItem = (item, index) => {
    return (
      <Item navigation={this.props.navigation} item={item} index={index} filterText={this.filterText}
            list={this.callerRoomStore}/>
    )
  };

  searchSub = () => {
    this.filterText = this.searchText;
  }

  toSub = () => {
    const {goBack} = this.props.navigation;
    const {store, name} = this.props.navigation.state.params;
    store[name].push([]);
    store[name].push([]);
    goBack();
  }

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={styles.searchHeader}>
          <View style={styles.leftInputView}>
            <Image
              source={searchIcon}
              resizeMode={"contain"}
              style={styles.icon3}
            />
            <TextInput
              style={styles.leftInput}
              placeholder={"请输入物料/货号"}
              underlineColorAndroid="transparent"
              onChangeText={(text) => this.searchText = text}
              value={this.searchText}
            />
          </View>
          <TouchableOpacity style={styles.searchBtn} onPress={this.searchSub}>
            <Text style={styles.font7}>搜索</Text>
          </TouchableOpacity>
        </View>

        <FlatList
          style={styles.con}
          data={this.addMaterialStore.list.filter((v, i) => v.name.indexOf(this.filterText) !== -1).slice(0)}
          keyExtractor={(item, index) => index}
          renderItem={({item, index}) => this.renderItem(item, index)}
        />

        <TouchableOpacity style={styles.addBtn} onPress={this.toSub}>
          <Text style={styles.font17}>确定</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

@observer
class Item extends Component {

  changeState = () => {
    const {item} = this.props;
    item.isSelected = !item.isSelected;
  }

  render() {
    const {item, filterText} = this.props;
    return (
      <TouchableOpacity style={styles.selectItem} onPress={this.changeState}>
        <View style={styles.leftItemView}>
          <View style={[item.isSelected ? styles.selectCircleItem : styles.circleItem, {marginRight: 10}]}>
            <Image
              source={duigouIcon}
              resizeMode={"contain"}
              style={[styles.icon7]}
            />
          </View>
          <Text style={styles.font22}>POS机001</Text>
        </View>
        <Text style={styles.font22}>货号: 123456789</Text>
      </TouchableOpacity>
    )
  }
}